import React from 'react'
import { Card } from 'antd'

import ReactEcharts from 'echarts-for-react';
import echartTheme from '../echartTheme'
// import echarts from 'echarts'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
export default class Bar extends React.Component{
    state={}
    componentWillMount(){
        echarts.registerTheme('Wind',echartTheme);
    }
    getOption=()=>{
        let option={
          title:{
              text:'用户骑行订单'
          },
          tooltip: {
            trigger: 'axis'
        },
          xAxis:{
              data:[
                  '周一',
                  '周二',
                  '周三',
                  '周四',
                  '周五',
                  '周六',
                  '周日']
          },
          yAxis:{
              type:'value'
          },
          series:[
              {
                  name:'订单量',
                  type:'bar',
                  data:[
                    1000,
                    1200,
                    1900,
                    1400,
                    1100,
                    1600,
                    1700
                ]
              }
          ]
        }
        return option;
    }

    getOption2=()=>{
        let option={
          title:{
              text:'用户骑行订单'
          },
          legend:{
            data:['OFO',"膜拜",'小蓝']
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis:{
              data:[
                  '周一',
                  '周二',
                  '周三',
                  '周四',
                  '周五',
                  '周六',
                  '周日']
          },
          yAxis:{
              type:'value'
          },
          series:[
              {
                  name:'OFO',
                  type:'bar',
                  data:[
                    1000,
                    2200,
                    3900,
                    4400,
                    6100,
                    7600,
                    700
                ]
              },
              {
                name:'膜拜',
                type:'bar',
                data:[
                  1400,
                  1600,
                  1890,
                  1120,
                  1340,
                  1600,
                  1780
              ]
            },
            {
                name:'小蓝',
                type:'bar',
                data:[
                  200,
                  4200,
                  1700,
                  1800,
                  1000,
                  1200,
                  1750
              ]
            }
          ]
        }
        return option;
    }
    
    render(){
        return (
            <div>
                <Card title="柱形图表之一">
                    <ReactEcharts option={this.getOption()} theme="Wind"   style={{height:500}} />
                </Card>
                <Card title="柱形图之一">
                    <ReactEcharts  option = {this.getOption()} />
                </Card>
                <Card title="柱形图表之二" style={{marginTop:10}}>
                    <ReactEcharts option={this.getOption2()} theme='Wind' style={{height:500}}/>
                </Card>
            </div> 
        );
    }
}